<template>
  <div class="conference-container">
    <div class="title-top">
      <div class="left">
        <i class="line"></i>
        <p class="text">会议管理</p>
      </div>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div class="center">
      <div class="search">
        <el-row>
          <el-col :span="16">
            <el-input
              placeholder="请输入会议主题"
              v-model="keywords"
              clearable
              class="input-with-select"
              size="small"
            >
              <div slot="append" class="inputbtn" @click="getListPageMeetingRecord">
                <i class="el-icon-search"></i>
              </div>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-button
              style="margin-left: 10px; height: 40px"
              type="primary"
              size="small"
              @click="addConference"
              v-hasPermi="['meeting:record:add']"
              ><i class="el-icon-plus"></i
            ></el-button>
            <el-button
              style="margin-left: 10px; height: 40px"
              type="danger"
              size="small"
              @click="remove"
              v-hasPermi="['meeting:record:remove']"
              ><i class="el-icon-delete"></i
            ></el-button>
          </el-col>
        </el-row>
      </div>
      <div class="table">
        <el-table
          class="table"
          :header-cell-style="{
            textAlign: 'center',
            color: '#A3B3BE',
            fontSize: '0.78125vw',
          }"
          :cell-style="{
            textAlign: 'center',
            fontSize: '0.78125vw',
            color: '#fff',
          }"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            v-for="item,index in tableDataColumn"
            :key="index"
            :width="item.width"
            :prop="item.prop"
            align="center"
            :show-overflow-tooltip="true"
            :label="item.label"
          >
          </el-table-column>
          <!-- <el-table-column label="会议状态">
            <template slot-scope="scope">
              <span>{{scope.row.status === '1' ? '待参加' : scope.row.status === '2' ? '进行中': scope.row.status === '3' ? '已结束': scope.row.status === '4' ? '已取消' : ''}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="openConference(scope.row)" v-if="scope.row.status === '1' || scope.row.status === '2'">{{scope.row.meetingCode}}</el-button>
              <el-button type="text" v-if="scope.row.status === '4' || scope.row.status === '6'" @click="checkConferenceDetails(scope.row)" v-hasPermi="['meeting:record:info']">查看</el-button>
              <el-button type="text" v-if="scope.row.status === '2'" @click="jieshu(scope.row)" v-hasPermi="['meeting:record:dismiss']">结束</el-button>
              <el-button type="text" v-if="scope.row.status === '1'" @click="canel(scope.row)" v-hasPermi="['meeting:record:cancel']">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <addConferenceDialog v-if="isShowDialog.addConferenceVisible" :isShowDialog="isShowDialog" @closeConference="closeConference"/>
    <checkConferenceDialog v-if="isShowCheck.CheckConferenceVisible" :isShowCheck="isShowCheck" @handleClose="handleClose"/>
  </div>
</template>

<script>
import * as API from '../../../../api/emergency/index'
import addConferenceDialog from './addConferenceDialog.vue'
import checkConferenceDialog from './checkConferenceDialog.vue'
export default {
  components: {
    addConferenceDialog, checkConferenceDialog
  },
  data() {
    return {
      keywords: null,
      tableData: [{}],
      tableDataColumn: [
        {
          prop: 'subject',
          width: 100,
          label: '会议主题'
        },
        {
          prop: 'startTime',
          width: 200,
          label: '会议时间'
        },
        {
          prop: 'duration',
          width: 100,
          label: '会议时长'
        },
        {
          prop: 'statusName',
          width: 100,
          label: '会议状态'
        },
        {
          prop: 'promoter',
          width: 100,
          label: '发起人'
        },
        {
          prop: 'participantNumber',
          width: 100,
          label: '参会人数'
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isShowDialog: {
        addConferenceVisible: false
      },
      isShowCheck: {
        CheckConferenceVisible: false,
        rowData: {}
      },
      multipleSelection: []
    }
  },
  mounted() {
    this.getListPageMeetingRecord()
  },
  methods: {
    // 查看历史会议
    checkConferenceDetails(row) {
      this.isShowCheck.CheckConferenceVisible = true
      this.isShowCheck.rowData = row
    },
    handleClose() {
      this.isShowCheck.CheckConferenceVisible = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    remove() {
      const array = []
      this.multipleSelection.forEach(item => {
        array.push(item.id)
      })
      API.removeMeetingRecord(array.toString()).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getListPageMeetingRecord()
        }
      })
    },
    canel(row) {
      const data = {
        'id': row.id
      }
      API.meetingCancel(data).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getListPageMeetingRecord()
        }
      })
    },
    // 结束
    jieshu(row) {
      const data = {
        'id': row.id
      }
      API.meetingDismiss(data).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.getListPageMeetingRecord()
        }
      })
    },
    // 打开腾讯会议
    openConference(row) {
      if ((row.status === '1' || row.status === '2') && row.joinUrl) {
        window.open(row.joinUrl)
      }
    },
    addConference() {
      this.isShowDialog.addConferenceVisible = true
    },
    closeConference() {
      this.isShowDialog.addConferenceVisible = false
      this.getListPageMeetingRecord()
    },
    close() {
      this.$emit('close')
    },
    getListPageMeetingRecord() {
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        subject: this.keywords
      }
      API.listPageMeetingRecord(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
      this.getListPageMeetingRecord()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
      this.getListPageMeetingRecord()
    }
  }
}
</script>

<style lang="scss" scoped>
.conference-container {
  position: absolute;
  top: 77px;
  right: 26px;
  z-index: 2;
  width: 400px;
  height: calc(100vh - 160px);
  background: linear-gradient(90deg, #031b36 0%, rgba(3, 28, 51, 0.3) 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1)) 1
    1;
  .title-top {
    display: flex;
    justify-content: space-between;
    line-height: 46px;
    align-items: center;
    background: #000000 url("@/assets/img/tjtitle.png") no-repeat;
    background-size: 100% 100%;
    width: 400px;
    height: 46px;
    .left {
      height: 100%;
      display: flex;
      align-items: center;
      // .line{
      //   height: 60%;
      //   width: 5px;
      //   display: inline-block;
      //   background: #4989ef;
      //   margin-right: 10px;
      //   margin-left: 5px;
      // }
      .text {
        font-size: 14px;
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
      }
    }
    .el-icon-close {
      margin-right: 5px;
      cursor: pointer;
      color: #fff;
    }
  }
  .center {
    height: calc(100% - 0.46rem);
    .search {
      height: 0.4rem;
      padding: 0.1rem;
      :deep(.el-input__inner) {
        font-size: 14px;
        height: 40px;
      }
      .inputbtn{
        background: linear-gradient(135deg, #2270D4 0%, #002689 100%);
        border-radius: 0px 4px 4px 0px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
    }
    .table{
      height: calc(100% - 0.6rem);
      :deep(.el-table__body-wrapper) {
        overflow: auto;
        max-height: calc(100% - 0.6rem);
      }
    }
  }
}
/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #c9e9ff;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7ec1ff;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover) {
  background-color: transparent;
}
:deep(.el-table .warning-row) {
  background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table) {
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;
}
:deep(.el-table tbody tr:hover > td) {
  background: rgba(51, 91, 127, 0.4) !important;
}
:deep(.el-table td.el-table__cell),
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  display: none;
}
:deep(.el-pager li) {
  background: none;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination button:disabled) {
  background: linear-gradient(180deg, rgba(3, 74, 174, 0.2) 0%, #034aae 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(76, 154, 216, 1),
      rgba(5, 84, 166, 1),
      rgba(77, 155, 217, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(111, 222, 252, 1),
      rgba(1, 124, 202, 1),
      rgba(103, 214, 247, 1)
    )
    1 1;
  color: #fff;
}
:deep(.el-pager li.active) {
  background: linear-gradient(180deg, rgba(9, 102, 169, 0.2) 0%, #0965a8 100%);
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pagination__total){
  color: #fff;
}
</style>
